<template>
    <div class="colorFFF">
        <div >
            <div class="flexSB   select szie14" style="width: 220px">
            <div :class="{ titleBox: select == item.type }" :key="index" @click="selectFun(item)" class="hand title" 
                v-for="(item, index) in goodsType">
                {{ item.title }}
            </div>
        </div>
                <div v-show="select == 'receive'">
                    <div  class="flexFCC">
                        <div class="flexFS size20">
                        <div>
                            共
                            <span style="color:#FFDB5C">{{ receiveNum }}</span>件礼物
                        </div>
                        <div style="margin-left: 30px;">
                            总价值：
                            <span class="" style="color:#FFDB5C">{{ collectTotalPrice }}</span>{{$store.state.config.coin_name}}
                        </div>
                    </div>
                    </div>
                    <div>
                        <div class="marginTop30" v-if="datas.length > 0">
                            <el-row :gutter="20">
                                <el-col :key="index" :span="3" v-for="(item, index) in datas">
                                    <div class=" marginBottom20 radius10 flexFCC" style="padding: 10px;">
                                        <el-image :src="item.gift_icon" fit="cover" style="width: 50px;"></el-image>
                                        <div class=" size14 marginTopBottom5 omit1">{{ item.gift_name + ' x ' + item.total}}</div>
                                        <div class="size12 flexSB sizeCenter opacity5" >
                                            {{ item.gift_price +''+ $store.state.config.coin_name }}
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>

                        <div v-else>
                            <el-empty :image="empty_image"></el-empty>
                        </div>
                    </div>
                </div>
                <div v-show="select == 'send'">
                    <div class="flexFCC">
                        <div class="flexFS size20">
                        <div>
                            共
                            <span class="" style="color:#FFDB5C">{{ sendNum }}</span>件礼物
                        </div>
                        <div style="margin-left: 30px;">
                            总价值：
                            <span class="" style="color:#FFDB5C">{{ deliverTotalPrice }}</span>{{$store.state.config.coin_name}}
                        </div>
                    </div>
                    </div>
                    <div>
                        <div class="marginTop30" v-if="index_give.length > 0">
                            <el-row :gutter="20">
                                <el-col :key="index" :span="3" v-for="(item, index) in index_give">
                                    <div class="marginBottom20 radius10 flexFCC" style="padding: 10px;">
                                        <el-image :src="item.gift_icon" fit="cover" style="width: 50px;"></el-image>
                                        <div class="size14 marginTopBottom5 omit1">{{ item.gift_name + ' x ' + item.total}}</div>
                                        <div class="size12 flexSB sizeCenter opacity5">
                                            {{ item.gift_price +''+ $store.state.config.coin_name}}
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>

                        <div v-else>
                            <el-empty ></el-empty>
                        </div>
                    </div>
                </div>

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeName: 0,
            datas: [],
            index_give: [],
            collectTotalPrice: 0,
            deliverTotalPrice: 0,
            loading: false,
            empty_image: require('@/assets/image/empty.png'),
            select: 'receive',
            goodsType: [
                {
                    title: '我收到的',
                    type: 'receive',
                },
                {
                    title: '我送出的',
                    type: 'send',
                },
            ],
            receiveNum:0,
            sendNum:0,
        }
    },
    mounted() {
        this.getMyGift()
    },
    methods: {
        selectFun(item) {
            this.select = item.type
            if (this.select == 'send') {
                console.log('进入')
                this.getMyDeliverGift()
            }
        },
        getMyGift() {
            let that = this
            this.loading = true
            this.receiveNum = 0
            that.collectTotalPrice = 0
            this.$request
                .get('/user-livegift/index_gain')
                .then((res) => {
                    this.datas = res
                    res.filter(function (value, index, arr) {
                        that.collectTotalPrice += ( parseInt(value.total) *  parseInt(value.gift_price))
                        that.receiveNum += parseInt(value.total)
                    })
                    // this.getMemberList() //重新请求数据
                })
                .catch((error) => {})
                .finally((res) => {
                    this.loading = false
                })
        },

        getMyDeliverGift() {
            let that = this
            this.loading = true
            this.sendNum = 0
            that.deliverTotalPrice = 0
            this.$request
                .get('/user-livegift/index_give')
                .then((res) => {
                    this.index_give = res
                    console.log(res, 'getMyDeliverGift')
                    res.filter(function (value, index, arr) {
                        that.deliverTotalPrice += ( parseInt(value.total) *  parseInt(value.gift_price))
                        that.sendNum += parseInt(value.total)
                    })
                    // this.getMemberList() //重新请求数据
                })
                .catch((error) => {})
                .finally((res) => {
                    this.loading = false
                })
        },
        

    },
}
</script>

<style  lang="scss" scoped>
.titleBox {
    border-radius: 100px;
    background-color: #272337;
}


.title {
    width: 80px;
    padding: 5px;
    text-align: center;
}

.select {
    color: #FFF;
    border: 1px solid #24203B;
    border-radius: 100px;
    padding: 5px;
    box-sizing: border-box;
    background-color: #151225;
}

.selectType {
    border-radius: 50px;

    // box-sizing: border-box;
}

/deep/.el-tabs__nav.is-stretch {
    min-width: auto !important;
    width: 80%;
    margin-left: 10%;
}

/deep/.el-tabs__item {
    font-size: 17px !important;
    color: #666 !important;
}

/deep/.el-tabs__item.is-active {
    color: #333 !important;
}

/deep/.el-tabs__active-bar {
    background-color: #ff1c6d !important;
}

/deep/.el-tabs__nav-wrap::after {
    background: #eee !important;
    height: 1px !important;
}
</style>